<template>
	<view>
		<view style="height: 100upx;display: flex;justify-content: space-around;background-color: #fff;font-size: 28upx;line-height: 100upx;border-bottom: 1upx solid #ccc;">
			<view :class="status == 520 ? 'active' : ''" @click="changestatus" style="line-height: 100upx;">
				全部
			</view>
			<view :class="status == 0 ? 'active' : ''" @click="changestatus0" style="line-height: 100upx;">
				待支付
			</view>
			<view :class="status == 1 ? 'active' : ''" style="line-height: 100upx;" @click="changestatus1">
				待审核
			</view>
			<view :class="status ==2 ? 'active' : ''" style="line-height: 100upx;" @click="changestatus2">
				已完成
			</view>
			<view :class="status == -1 ? 'active' : ''" style="line-height: 100upx;" @click="changestatus3">
				无效
			</view>
		</view>
		<view v-if="status == 520">
			<view v-for="(item,key) in list" :key="key" style="width: 95%;margin-left: 2.5%;background-color: #fff;border-radius: 20upx;margin-top: 20upx;height: 300upx;">
				<view style="width: 90%;height: 80upx;line-height: 80upx;margin-left: 10%;display: flex;">
					<view class="">
						挂卖人昵称:{{item.gnickname}}
					</view>
					<view class="" style="margin-left: 50upx;">
						<text v-if="item.status == 0">订单状态:待支付</text>
						<text v-if="item.status == 1">订单状态:待审核</text>
						<text v-if="item.status == 2">订单状态:已完成</text>
						<text v-if="item.status == -1">订单状态:无效</text>
					</view>
				</view>
				<view style="width: 90%;height: 50upx;line-height: 50upx;margin-left: 10%;">
					下单时间:{{item.createtime}}
				</view>
				<view style="display: flex;width: 90%;height: 100upx;line-height: 100upx;margin-left: 10%;">
					<view style="line-height: 100upx;">
						算力:{{item.price}}
					</view>
					<view style="margin-left: 150upx;line-height: 100upx;">
						数量:{{item.num}}
					</view>
				</view>
				<view style="display: flex;">
					<view style="width:50;margin-left: 10%;margin-right: 30%;">
						合计:{{item.money}}
					</view>
					<button v-if="item.status == 0" @click="tovoucher(item.id)" style="width: 20%;font-size: 18upx;background-color: #f00;color: #fff;" type="default">立即支付</button>
				</view>
			</view>
		</view>
		<view v-if="status == 0">
			<view v-for="(item,key) in list" :key="key" style="width: 95%;margin-left: 2.5%;background-color: #fff;border-radius: 20upx;margin-top: 20upx;height: 300upx;">
				<view style="width: 90%;height: 80upx;line-height: 80upx;margin-left: 10%;">
					挂卖人昵称:{{item.gnickname}}
				</view>
				<view style="width: 90%;height: 50upx;line-height: 50upx;margin-left: 10%;">
					下单时间:{{item.createtime}}
				</view>
				<view style="display: flex;width: 90%;height: 100upx;line-height: 100upx;margin-left: 10%;">
					<view style="line-height: 100upx;">
						算力:{{item.price}}
					</view>
					<view style="margin-left: 150upx;line-height: 100upx;">
						数量:{{item.num}}
					</view>
				</view>
				<view style="display: flex;">
					<view style="width:50;margin-left: 10%;margin-right: 30%;">
						合计:{{item.money}}
					</view>
					<button @click="tovoucher(item.id)" style="width: 20%;font-size: 18upx;background-color: #f00;color: #fff;" type="default">立即支付</button>
				</view>
			</view>
		</view>
		<view v-if="status == 1">
			<view v-for="(item,key) in list" :key="key" style="width: 95%;margin-left: 2.5%;background-color: #fff;border-radius: 20upx;margin-top: 20upx;height: 300upx;">
				<view style="width: 90%;height: 80upx;line-height: 80upx;margin-left: 10%;">
					挂卖人昵称:{{item.gnickname}}
				</view>
				<view style="width: 90%;height: 50upx;line-height: 50upx;margin-left: 10%;">
					下单时间:{{item.createtime}}
				</view>
				<view style="display: flex;width: 90%;height: 100upx;line-height: 100upx;margin-left: 10%;">
					<view style="line-height: 100upx;">
						算力:{{item.price}}
					</view>
					<view style="margin-left: 150upx;line-height: 100upx;">
						数量:{{item.num}}
					</view>
				</view>
				<view style="display: flex;">
					<view style="width:50;margin-left: 10%;margin-right: 30%;">
						合计:{{item.money}}
					</view>
					<!-- <button style="width: 20%;font-size: 18upx;background-color: #f00;color: #fff;" type="default">立即支付</button> -->
				</view>
			</view>
		</view>
		<view v-if="status == 2">
			<view v-for="(item,key) in list" :key="key" style="width: 95%;margin-left: 2.5%;background-color: #fff;border-radius: 20upx;margin-top: 20upx;height: 300upx;">
				<view style="width: 90%;height: 80upx;line-height: 80upx;margin-left: 10%;">
					挂卖人昵称:{{item.gnickname}}
				</view>
				<view style="width: 90%;height: 50upx;line-height: 50upx;margin-left: 10%;">
					下单时间:{{item.createtime}}
				</view>
				<view style="display: flex;width: 90%;height: 100upx;line-height: 100upx;margin-left: 10%;">
					<view style="line-height: 100upx;">
						算力:{{item.price}}
					</view>
					<view style="margin-left: 150upx;line-height: 100upx;">
						数量:{{item.num}}
					</view>
				</view>
				<view style="display: flex;">
					<view style="width:50;margin-left: 10%;margin-right: 30%;">
						合计:{{item.money}}
					</view>
					<!-- <button style="width: 20%;font-size: 18upx;background-color: #f00;color: #fff;" type="default">立即支付</button> -->
				</view>
			</view>
		</view>
		<view v-if="status == -1">
			<view v-for="(item,key) in list" :key="key" style="width: 95%;margin-left: 2.5%;background-color: #fff;border-radius: 20upx;margin-top: 20upx;height: 300upx;">
				<view style="width: 90%;height: 80upx;line-height: 80upx;margin-left: 10%;">
					挂卖人昵称:{{item.gnickname}}
				</view>
				<view style="width: 90%;height: 50upx;line-height: 50upx;margin-left: 10%;">
					下单时间:{{item.createtime}}
				</view>
				<view style="display: flex;width: 90%;height: 100upx;line-height: 100upx;margin-left: 10%;">
					<view style="line-height: 100upx;">
						算力:{{item.price}}
					</view>
					<view style="margin-left: 150upx;line-height: 100upx;">
						数量:{{item.num}}
					</view>
				</view>
				<view style="display: flex;">
					<view style="width:50;margin-left: 10%;margin-right: 30%;">
						合计:{{item.money}}
					</view>
					<!-- <button @click="tovoucher" style="width: 20%;font-size: 18upx;background-color: #f00;color: #fff;" type="default">立即支付</button> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	  data() {
	   return {
	    status:520,
			index:0,
			list:[],
	   }
	  },
	  onLoad() {
	    uni.getStorage({
	        key: 'openid',
	        success: (res)=> {
	           this.openid = res.data
	    			 this.getdata()
	        }
	    });
	  },
	  methods: {
			getdata(){
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.bz_exchange.buy_list&app=1',
					method: 'POST',
					data: {
						'openid':this.openid,
						'status' : this.status,
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success:(res) => {
						console.log(res)
						this.list = res.data.result.list
					},
					fail: () => {},
					complete: () => {}
				});
			},
			tovoucher(id){
				// console.log(id)
				uni.navigateTo({
					url:'voucher?id='+id
				})
			},
			changestatus(){
				this.status = 520
				this.getdata()
			},
			changestatus0(){
				this.status = 0
				this.getdata()
			},
			changestatus1(){
				this.status = 1
				this.getdata()
			},
			changestatus2(){
				this.status = 2
				this.getdata()
			},
			changestatus3(){
				this.status = -1
				this.getdata()
			},
	  }
	 }
</script>

<style>
	.active {
		color: #f00;
		border-bottom: 5upx solid #f00;
		}
</style>
